<template>
  <div class="edit-container">
    <el-dialog
      :visible.sync="dialog"
      :loading="loading"
      :close-on-click-modal="false"
      :title="title"
      top="1px"
      width="750px"
      left
      @close="closeDlg"
    >
      <div class="app-container">
        <div style="padding-top:5px">
          <el-form ref="editForm" :model="notice" :inline="true" :rules="rules" size="mini" label-width="167px">
            <el-row>
              <el-col :span="24">
                <el-form-item label="主题" required prop="topic">
                  <el-input v-model="notice.topic" size="mini" clearable style="width: 400px;" />
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="公告内容" required prop="context">
                  <el-input v-model="notice.context" type="textarea" :rows="10" required clearable size="mini" style="width: 400px;" />
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="是否在主页显示" prop="visible">
                  <el-radio-group v-model="notice.visible" size="mini" style="width: 400px;">
                    <el-radio v-for="item in visibles" :key="item.value" :label="item.value">{{ item.name }}</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>
      <el-row :gutter="20">
        <el-col :span="12"><div style="text-align: right;"><el-button type="primary" size="small" round @click="onSubmit(notice)">保存</el-button></div></el-col>
        <el-col :span="12"><div><el-button type="primary" size="small" round @click="closeDlg">取消</el-button></div></el-col>
      </el-row>
    </el-dialog>
  </div>
</template>
<script>
import { saveNotice, updateNotice } from '@/api/notice'
export default {
  props: {
    parent: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      dialog: false,
      loading: false,
      title: '',
      rules: { // 表单验证规则
        topic: [{ required: true, message: '主题不能为空', trigger: 'blur' }, { required: true, message: '主题不能为空', trigger: 'change' }],
        context: [{ required: true, message: '内容不能为空', trigger: 'blur' }, { required: true, message: '内容不能为空', trigger: 'change' }]
      },
      notice: this.getEmptyNotice(),
      visibles: []
    }
  },
  created() {

  },
  methods: {
    closeDlg() {
      this.notice = this.getEmptyNotice()
      this.$refs.editForm.resetFields()
      this.dialog = false
    },
    closeRefresh() {
      this.closeDlg()
      this.parent.resetForm()
      this.parent.toQuery()
    },
    getEmptyNotice() {
      return {
        id: null,
        topic: null,
        context: null,
        visible: 1
      }
    },
    // 提交触发
    onSubmit(ruleInfo) {
      this.$refs.editForm.validate(valid => {
        if (valid) {
          this.loading = true
          this.$confirm('是否保存信息?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.loading = true
            if (this.notice.id) { // 更新
              updateNotice(this.notice).then(res => {
                if (res) {
                  this.parent.showSucessMessage(res.result)
                  this.closeRefresh()
                  this.loading = false
                }
              }, error => {
                console.log(error)
                this.loading = false
              })
            } else { // 新增
              saveNotice(this.notice).then(res => {
                if (res) {
                  this.parent.showSucessMessage(res.result)
                  this.closeRefresh()
                  this.loading = false
                }
              }, error => {
                console.log(error)
                this.loading = false
              })
            }
          })
        } else {
          return false
        }
      })
    }
  }
}
</script>
<style scoped>
.edit-container .el-form-item--mini.el-form-item {
  margin-bottom: 15px
}
</style>
